<div id="page-tradingview-index">
  <div class="page-tradingview-index df jcc light">
    <div class="left">
      <div class="panel-market"><app-panel-symbol></app-panel-symbol></div>

      <div class="panel-trade"><app-panel-trade></app-panel-trade></div>
    </div>
    <div class="right">
      <div class="head">
        <div class="panel-tv"><app-panel-tv></app-panel-tv></div>

        <div class="panel-price">
          <app-panel-depth>
            <ng-container *ngIf="(isLogin$ | async)">
              <div class="panel-exchange">
                <div class="panel-comexchange">
                  <div class="df jcsb tab">
                    <button
                      mat-button
                      [ngClass]="{ buy: onTab === 'buy' }"
                      (click)="onTab = 'buy'"
                      l10nTranslate
                    >
                      i18n.exchange.buy
                    </button>
                    <button
                      mat-button
                      [ngClass]="{ sell: onTab === 'sell' }"
                      (click)="onTab = 'sell'"
                      l10nTranslate
                    >
                      i18n.exchange.sell
                    </button>
                  </div>
                  <div class="df">
                    <app-order-buy
                      *ngIf="onTab === 'buy'"
                      class="panel-comexchangebuy"
                    ></app-order-buy>
                    <app-order-sell
                      *ngIf="onTab === 'sell'"
                      class="panel-comexchangesale"
                    ></app-order-sell>
                  </div>
                </div>
              </div>
            </ng-container>
            <ng-container *ngIf="!(isLogin$ | async)">
              <div
                style="padding-left:30px;padding-right:30px;height:100%;height: 442px;"
                class="df aic"
              >
                <app-login-tip [type]="'exchange'"></app-login-tip>
              </div>
            </ng-container>
          </app-panel-depth>
        </div>
      </div>
      <div class="body">
        <div class="panel-order"><app-panel-active></app-panel-active></div>
        <div class="panel-order"><app-panel-history></app-panel-history></div>
      </div>
    </div>
  </div>
</div>
